<template>
  <div>
    <h2>投资列表</h2>
    投资名称<input type="text" v-model="state.Iname" ><input type="button" value="查询" @click="go1">
    <table class="table" border=1>
      <tr>
        <td>项目ID</td>
        <td>投资项目名称</td>
        <td @click="sum">总额度</td>
        <td>已投金额</td>
        <td>剩余额度</td>
        <td>投资次数</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.I_id }}</td>
        <td>{{item.Iname}}</td>
        <td>{{item.I_Sum}}</td>
        <td>{{item.I_Ysum}}</td>
        <td>{{item.I_Esum}}</td>
        <td>{{item.Inumber}}</td>
      </tr>
    </table>
    共有<span>{{  count}}</span>条数据,
    每页显示<span>{{ state.pagesize }}</span>条数据,
    当前<span>{{ state.pageindex }}</span>/<span>{{ pcount }}</span>页
    <input type="button" value="首页"   @click="Jump('First')">
    <input type="button" value="上一页" @click="Jump('on')">
    <input type="text" size="1" v-model="state.pageindex"><input type="button" value="go" @click="go2">
    <input type="button" value="下一页" @click="Jump('next')">
    <input type="button" value="尾页" @click="Jump('end')">
    <select v-model="state.pagesize" @change="Size">
      <option v-for="item in arr" :value="item">每页{{ item }}条</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { reactive, toRefs, onMounted } from 'vue';
let data = reactive({
  state: {
    Iname: '',
    pagesize:2,
    pageindex:1
  },
  list: {},
  count:"",
  pcount:"",
  arr:[2,4,6,8]
});
let { list, state ,count,pcount,arr} = toRefs(data);
onMounted(()=>{
  getlist()
})
function go1()
{
  getlist();
}
function Size()
{
  getlist();
}
function getlist()
{
  axios({
    url: 'http://localhost:57328/api/Invest/GetInvestList',
    method: 'get',
    params: state.value
  })
    .then((res) => {
      console.log(res);
      list.value=res.data.data
      count.value=res.data.Count
      pcount.value=res.data.Pcount
    })
    .catch((err) => {
      console.log(err);
    });
}
function sum()
{
  axios({
    url: 'http://localhost:57328/api/Invest/GetInvestListsum',
    method: 'get',
    params: state.value
  })
    .then((res) => {
      console.log(res);
      list.value=res.data.data
    })
    .catch((err) => {
      console.log(err);
    });
}
function Jump(str:any)
{
  switch (str) {
    case 'First':
      if(state.value.pageindex==1)
      {
        alert("当前已经是首页");
        return;
      }
      state.value.pageindex=1
      break;
      case 'end':
      if(state.value.pageindex==pcount.value)
      {
        alert("当前已经是尾页");
        return;
      }
      state.value.pageindex=pcount.value
      break;
      case 'on':
      if(state.value.pageindex==1)
      {
        alert("当前已经是首页");
        return;
      }
      state.value.pageindex-=1;
      break;
      case 'next':
      if(state.value.pageindex==pcount.value)
      {
        alert("当前已经是尾页");
        return;
      }
      state.value.pageindex+=1;
      break;
  
    
  }
  getlist();
}
function go2()
{
  getlist();
}
</script>

<style scoped>

</style>